<template>
  <div class="paper-textarea-warpper">
    <textarea
      class="paper-textarea"
      :placeholder="placeholder"
      :rows="row"
      :value="textAreaValue"
      :maxlength="maxlength"
      @input="getTextAreaValue"
    />
    <div class="paper-length-maxlength">
      <span>{{ length }}</span> / <span>{{ maxlength }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String
      // default: '请输入内容',
    },
    value: {
      type: [String, undefined],
      default: undefined,
    },
    row:{
      type: [Number]
    },
    maxlength: {
      type: [Number]
    },
  },
  data() {
    return {
      textAreaValue: this.value,
      length: this.value?.length || 0,
    };
  },
  methods: {
    getTextAreaValue(e) {
      const event = e || window.event;
      const target = event.srcElement || event.taget;
      this.length = target.value.length;
      if (length <= this.maxlength || this.maxlength == undefined) {
        this.textAreaValue = target.value;
      }
      this.$emit('change', this.textAreaValue);
    },
  },
};
</script>

<style lang="less">
.paper-textarea-warpper {
  position: relative;
  padding: 10px 10px 24px 10px;
  background-color: #fafafa;
  border-radius: 4px;
  .paper-length-maxlength {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 13px;
    color: #bababa;
  }
}
.paper-textarea {
  border: none;
  width: 100%;
  background-color: #fafafa;
  /** 禁止textarea拉伸 */
  resize: none;

  /* WebKit, Blink, Edge */
  &::-webkit-input-placeholder {
    color: #bababa;
  }
  /* Mozilla Firefox 4 to 18 */
  &:-moz-placeholder {
    color: #bababa;
  }
  /* Mozilla Firefox 19+ */
  &::-moz-placeholder {
    color: #bababa;
  }
  /* Internet Explorer 10-11 */
  &:-ms-input-placeholder {
    color: #bababa;
  }
}
</style>
